<template>
	<view>
		<br />
		<view style="margin-top:20px;" v-for="(item,index) in houseTypeList" :key="index">
			<view class="box1">
				<view style="margin-left: 10px;color: #898F96;font-size: large;">户型详情</view>

				<view class="" style="margin-top: 20px;" @click="previewImage(index)">
					<image :src="item.houseTypeUrl"></image>
				</view>
				<view class="tag" style="width: 30px;color: #fff;background-color:#FF1E17 ;">
					在售</view>
				<view class="wenzi">
					<text style="padding-left: 10px;color: #898F96; padding-top: 20px; font-size: medium;">户型名称:</text>
					<text
						style="padding-left: 10px;color: #898F96; padding-top: 20px; font-size: medium;">{{item.houseTypeName}}</text>
					<br />
					<text style="padding-left: 10px;color: #898F96; padding-top: 20px; font-size: medium;">户型价格:</text>
					<text
						style="padding-left: 10px;color: #FF352F; padding-top: 20px; font-size: medium;">{{item.houseTypePrice}}</text>
					<text
						style="padding-left: 10px;color: #FF352F; padding-top: 20px; font-size: medium;">{{item.houseTypePriceUnit}}</text>
					<br />
					<text style="padding-left: 10px;color: #898F96; padding-top: 20px; font-size: medium;">户型分布:</text>
					<text
						style="padding-left: 10px;color: #898F96; padding-top: 20px; font-size: medium;">{{item.houseTypeDistribution}}</text>
					<br />
					<text style="padding-left: 10px;color: #898F96; padding-top: 20px; font-size: medium;">所属项目:</text>
					<text
						style="padding-left: 10px;color: #898F96; padding-top: 20px; font-size: medium;">{{item.houseTypeDistribution}}</text>
					<br />
					<text style="padding-left: 10px;color: #898F96; padding-top: 20px; font-size: medium;">户型解析:</text>
					<text
						style="padding-left: 10px;color: #898F96; padding-top: 20px; font-size: medium;">{{item.houseTypeDistribution}}</text>
				</view>
			</view>

		</view>


			<uni-section type="line">
				<uni-card title="置业顾问" :is-shadow="false" extra="查看更多 >">
					<view class="item-box" v-for="(item,i) in consultantList" :key="i" style="">
						<image class="avatar" :src="'http://101.201.82.10:8001/file/%E5%9B%BE%E7%89%87/'+item.consultantAvatar" mode=""></image>
						<text class="" style="margin-left: 60px;">{{item.consultantName}}</text>
						</br>
						<text class="" style="margin-left: 60px;">置业顾问</text>

						<view class="call" @click="call(item.consultantPhone)">
							<text>联系</text>
						</view>
					</view>
				</uni-card>
			</uni-section>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				consultantList: [{
					consultantAvatar: 'https://www.w3cplus.com/sites/default/files/blogs/2020/2004/css-circle-image-2.jpg',
					consultantName: '田洪飞',
					phone: 1
				}, {
					consultantAvatar: 'https://www.w3cplus.com/sites/default/files/blogs/2020/2004/css-circle-image-2.jpg',
					consultantName: '田洪飞',
					phone: 2
				}, {
					consultantAvatar: 'https://www.w3cplus.com/sites/default/files/blogs/2020/2004/css-circle-image-2.jpg',
					consultantName: '田洪飞',
					phone: 3
				}],
				houseTypeList: [

				],
				houseTypeUrl:[],
			}
		},
		onShow() {
			uni.getStorage({
				key:'houseType',
				success: (res) => {
					this.houseTypeList = res.data;

					console.log('this.houseType',this.houseTypeList);
				}
			}),
			uni.getStorage({
				key:'consultant',
				success: (res) => {
					this.consultantList = res.data
					console.log('consultant',this.consultantList);
				}
			})
		},
		methods: {
			call(value) {
				console.log('value', value)
				uni.makePhoneCall({
					phoneNumber: value
				})
			},
			previewImage(index) {
				console.log('预览')
				uni.previewImage({
					current: index,
					urls: this.houseTypeList.houseTypeUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F8F9;
	}

	.img {
		width: 200px;
		height: 70px;
		position: absolute;
		top: 50px;
		left: 200px;
	}
	.call {

		border: 1px solid #787D82;
		border-radius: 16px;
		width: 60px;
		position: relative;
		top: -13px;
		float: right;
		text-align: center;
	}
	.item-box {
		margin-top: 5px;
	}

	.wenzi {
		float: left;
		margin-top: 30px;
		margin-left: -10px;

	}

	.tag {
		margin-right: 6px;
		float: left;
		border: 1px solid #787D82;
		border-radius: 3px;
		height: 18px;
		font-size: smaller;
		text-align: center;
		position: relative;
		top: 0px;
		left: 40px;
		bottom: 30px;
	}
	.avatar {
		border-radius: 50%;
		width: 50px;
		height: 50px;
		position: absolute;
		left: 30px;
		margin-right: 30px;
	}
	.box1 {

		height: 900rpx;
		padding-top: 15px;
		width: 700rpx;
		border-left: 20px;
		margin: 0 auto;
		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}

	.box2 {
		height: 200rpx;
		padding-top: 15px;
		width: 700rpx;
		border-left: 20px;
		margin: 0 auto;

		background-color: #FFFFFF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
	}
</style>
